<script lang="ts" setup>
import type { addGoodsType } from "./type";
import { useStore } from "vuex";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
import uploads from "@/utils/uploads";
import { ElMessage } from "element-plus";
const goodsFormRef = ref();
const goodsForm = reactive<addGoodsType>({
  username: store.state.userInfo.username,
  times: "",
  content: "",
  category: "",
  files: [],
  imageList: [],
});

const goodsFormRules = reactive({
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  category: [{ required: true, message: "请选择类别", trigger: "blur" }],
  imgList: [{ required: true, message: "请选择图片", trigger: "blur" }],
});

const options = [
  {
    label: "未知",
    value: "0",
  },
  {
    label: "书本闲置",
    value: "1",
  },
  {
    label: "电子设备闲置",
    value: "2",
  },
  {
    label: "生活用品闲置",
    value: "3",
  },
  {
    label: "寻物启事",
    value: "4",
  },
  {
    label: "寻人启事",
    value: "5",
  },
  {
    label: "表白墙",
    value: "6",
  },
  {
    label: "拼车",
    value: "7",
  },
  {
    label: "求助帖",
    value: "8",
  },
];
// @ts-ignore
const handleRemove = (uploadFile: any, uploadFiles: any) => {
  goodsForm.files = uploadFiles.map((item: any) => {
    return item.raw;
  });
};

const handlePreview = (file: any) => {
  if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
    // @ts-ignore
    goodsForm.files.push(file.raw);
  } else {
    ElMessage({
      type: "error",
      message: "请上传jpg/png格式图片",
    });
  }
};

const submitForm = async () => {
  goodsFormRef.value.validate(async (valid: any) => {
    if (valid) {
      if (goodsForm.files.length != 0) {
        const res = await uploads("goods/add", goodsForm);
        if (res.code == "200") {
          router.push("/center");
        }
      } else {
        ElMessage({
          type: "error",
          message: "图片列表不能为空",
        });
      }
    }
  });
};
const exceedHandler = (files: any) => {
  if (files.length > 8) {
    ElMessage({
      type: "error",
      message: "图片不能超过8张",
    });
  }
};
const goBack =()=>{
  router.back()
}
</script>
<template>
  <el-card>
    <template #header>
     <div class="card-header">
      <el-page-header @back="goBack">
            <template #content>
              <span class="text-large font-600 mr-3"> 发布作品 </span>
            </template>
          </el-page-header>
     </div>
    </template>
    <el-form
      ref="goodsFormRef"
      :model="goodsForm"
      :rules="goodsFormRules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="内容" prop="content">
        <textarea v-model="goodsForm.content" />
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="goodsForm.category" placeholder="请选择分类">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="图片">
        <el-upload
          :on-exceed="exceedHandler"
          :limit="8"
          multiple
          class="upload-demo"
          action=""
          :on-change="handlePreview"
          :on-remove="handleRemove"
          list-type="picture"
          :auto-upload="false"
        >
          <el-button type="primary">上传图片</el-button>
          <template #tip v-if="goodsForm.files.length == 0">
            <div class="el-upload__tip">
              请上传jpg/png格式图片,且大小不能够超过500kb,8张以内
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<style lang="scss" scoped>
.left-card {
  text-align: center;
}
textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
}
</style>
